css.types.basic-shape.shape - add note about unimplemented via to with change

[OnkarRuikar]

What type of issue is this?

Missing compatibility data

What information was incorrect, unhelpful, or incomplete?

The shape() function had a syntax change recently. The via keyword was renamed to with in the syntax.

What browsers does this problem apply to, if applicable?

No response

What did you expect to see?

It would be great if a note is added to BCD saying the function is still using via instead of with. Add the note for Chrome, Edge, Firefox. No need for Safari because it has released the change in prod.

Did you test this? If so, how?

In a local Linux dev environment.

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

• css(fix): update 'shape()' page content#39454 (comment)
• Shape() Syntax Outdated content#36950

Do you have anything more you want to share?

No response

MDN URL

No response

MDN metadata

No response

[caugner]

Spec history:

• [css-shapes-2]: apply minor comments to shape() syntax w3c/csswg-drafts#9797 changed via to using in July 2024.
• [css-shapes-2] Specify the grammar for shape() w3c/csswg-drafts#11207 changed using to with in December 2024.

I think it would actually make sense to add a behavioral subfeature with_keyword.

[OnkarRuikar]

Also, shape() is supported for clip-path property but not offset-path in Edge.

[caugner]

Also, shape() is supported for clip-path property but not offset-path in Edge.

If support has landed in Chrome stable, it should also be available in Edge.

@OnkarRuikar Would you have a small test case to determine which syntax a browser supports?

[OnkarRuikar]

Would you have a small test case to determine which syntax a browser supports?

@caugner I've made one: https://jsbin.com/yiwugowugo/1/edit?html,js,output

Outputs from some browsers:

Chrome 138.0.7180.2 (Official Build) dev (64-bit)
clip-path shape(with): ✅
clip-path shape(via): ❌

offset-path shape(): ✅
offset-path shape(with): ✅
offset-path shape(via): ❌

-----------------------------------------------

Firefox 138.0.3 (64-bit)
clip-path shape(with): ❌
clip-path shape(via): ✅

offset-path shape(): ✅
offset-path shape(with): ❌
offset-path shape(via): ✅ 

-----------------------------------------------

Brave 1.78.97 Chromium: 136.0.7103.93 (Official Build) (64-bit)
clip-path shape(with): ✅
clip-path shape(via): ❌

offset-path shape(): ❌

-----------------------------------------------

Edge  136.0.3240.76 (Official build) (64-bit)
clip-path shape(with): ✅
clip-path shape(via): ❌

offset-path shape(): ❌